<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./assets/bootstrap/dist/css/bootstrap.min.css">
    <title>验证邮箱地址是否已经注册</title>
    <style>
        .container{
            margin-top: 60px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="form-group">
            <label >邮箱地址</label>
            <input type="email" class="form-control" placeholder="请输入邮箱地址" id="email">
        </div>
        <p id="info"></p>
    </div>
</body>
<script>
    // 获取页面中的元素
    const emailInp = document.getElementById('email')
    const info = document.getElementById('info')
    // 获得焦点
    emailInp.onfocus = function (){
        info.innerHTML = ''
        info.className = 'bg-primary'
    }
    // 失去焦点校验
    emailInp.onblur = function (){
        var email = this.value;
        // 邮箱验证正则
        var reg = /^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*\.[a-z]{2,}$/
        if(!reg.test(email)){
            info.innerHTML = '请输入正确的邮箱';
            info.className = 'bg-danger'
            // 禁止往下执行
            return ;
        }
        info.innerHTML = '邮箱可注册'
        // 发送ajax请求验证
        // qAjax({
        //     type:'get',
        //     data:{
        //         email:email
        //     },
        //     url:'http://loalhost:3000/verifyEamilAdress',
        //     success:function (result){
        //         alert(result)
        //         info.innerHTML = result.message
        //         info.className = 'bg-success'
        //     },
        //     error:function (result){
        //         alert(result)
        //         info.innerHTML = result.message
        //         info.className = 'bg-danger'
        //     }
        //
        // })

        // 1.创建xhr对象
        var xhr =new XMLHttpRequest;

        var params = 'email='+email;
        // 2.设置请求方式和请求地址
        xhr.open('get','http://localhost:3000/verifyEamilAdress?'+ params)
        // 3.发送请求
        xhr.send()
        // 4.获取服务器段响应到客户端的数据
        xhr.onload = function(){
            info.innerHTML = xhr.responseText
            info.className = 'bg-success'
        }

    }


</script>
</html>